<template>
	<view>
		<view class="cateheadbox">
		  <u-icon @click="turnback" name="arrow-left" size="44rpx" color="#ffffff" style="margin:0rpx 20rpx"></u-icon>
      <view class="headSearch">
        <u-search v-model="searchText" shape="round" :show-action="false" @search="onsearch"></u-search>
      </view>
      <u-icon @click="turnmenu" name="list" size="44rpx" color="#ffffff" style="margin:0rpx 30rpx"></u-icon>
		</view>
    <!-- 分类 -->
    <view class="catebodyBox">
      <view class="body-left">
        <view class="leftitem" v-for="(item,index) in categorylist" :key="index" :class="{active:isActive ==index}" @click="changeActive(index)">
          {{item.categoryName}}
        </view>
      </view>
    <view class="body-right">
      <view class="right-head">
        {{name}}
      </view>
      <view class="body-content">
        <view class="body-item" v-for="item in subclass" :key="item.subclassCode">
          <u-image style="margin-bottom: 12rpx;" width="120rpx" height="120rpx" :src="item.imagePath"></u-image>
          <view class="body-item-text">
            {{item.subclassName}}
          </view>
        </view>
      </view>
    </view>
    </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        isActive:"0",
        subclass:[],
        name:'',
        searchText:'',
        categorylist:[
          {
            "categoryName": "汽车服务装饰",
            "name":"汽车关爱",
            "subclass": [
              {
                "subclassName": "汽车保养",
                "subclassCode": "23_01_01",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },
              {
                "subclassName": "汽车装饰",
                "subclassCode": "23_01_02",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },
              {
                "subclassName": "车载用品",
                "subclassCode": "23_01_03",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              }
            ],
            "categoryCode": "23"
          },
          {
            "categoryName": "数码影音娱乐",
            "name":"数码影音",
            "subclass": [
              {
                "subclassName": "影音娱乐",
                "subclassCode": "25_01_01",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },
              {
                "subclassName": "智能设备",
                "subclassCode": "25_01_02",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },
              {
                "subclassName": "手机配件",
                "subclassCode": "25_01_03",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              }
            ],
            "categoryCode": "25"
          },
          {
            "categoryName": "日用美妆百货",
            "name":"日用百货",
            "subclass": [
              {
                "subclassName": "面部护理",
                "subclassCode": "24_01_01",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },
              {
                "subclassName": "香水彩妆",
                "subclassCode": "24_01_02",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },
              {
                "subclassName": "身体护理",
                "subclassCode": "24_01_03",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },{
                "subclassName": "身体护理",
                "subclassCode": "24_01_04",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },{
                "subclassName": "身体护理",
                "subclassCode": "24_01_05",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },
              {
                "subclassName": "身体护理",
                "subclassCode": "24_01_06",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              },
              {
                "subclassName": "身体护理",
                "subclassCode": "24_01_07",
                "imagePath":"https://ae04.alicdn.com/kf/Hd8a0d5fdbfe94d1aa9d2bc3f699ce496b.png"
              }
            ],
            "categoryCode": "24"
          },
          
        ],
				
			}
		},
    created() {
      this.subclass =this.categorylist[0].subclass
      this.name = this.categorylist[0].name
    },
		methods: {
      changeActive(idx){
        this.isActive = idx
        this.name = this.categorylist[idx].name
        this.subclass =this.categorylist[idx].subclass
      },
      //搜索
      onsearch(value){
        console.log('进行了搜索，这是搜索关键字',value)
      },
      //点击返回
      turnback(){
        console.log('点击了返回')
      },
      //点击菜单（或者说是列表）
      turnmenu(){
        console.log('点击了右侧菜单/列表')
      }
      
			
		}
	}
</script>

<style lang="scss">
.cateheadbox{
  width: 100%;
  height: 80rpx;
  background-color: #5087EF;
  line-height: 80rpx;
  display: flex;
  .headSearch{
    width: 560rpx;
    height: 60rpx;
  }
}
.active{
  background-color: #FFFFFF;
  background-image: url(../../static/编组.png);
  background-repeat: no-repeat;
  background-size: 24rpx 40rpx;
  background-position: 20rpx;
  border-radius: 32rpx 0rpx 0rpx 32rpx;
  font-weight: 550 !important;
}
.catebodyBox{
  padding-top: 16rpx;
  background-color: #F7F8FA;
  .body-left{
    width: 250rpx;
    min-height:800px ;
    background-color: #F7F8FA;
    float: left;
    .leftitem{
      height: 100rpx;
      line-height: 100rpx;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
  .body-right{
    float: left;
    width: 500rpx;
    min-height:800px ;
    background-color: #FFFFFF;
    // padding-left: 30rpx;
    .right-head{
      margin-left:30rpx;
      height: 100rpx;
      font-size: 14px;
      line-height: 100rpx;
      font-weight: 550;
      color: #333333;
    }
    .body-content{
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      .body-item{
        width: 120rpx;
        height: 180rpx;
        margin-left: 30rpx;
        .body-item-text{
          width: 96rpx;
          height: 34rpx;
          line-height: 34rpx;
          font-size: 12px;
          color: #333333;
          text-align: center;
          margin: auto;
          text-overflow: ellipsis;
          overflow: hidden;
        }
      }
      
    }
  }
}
</style>
